<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>当前位置</el-breadcrumb-item>
      <el-breadcrumb-item>配电监控</el-breadcrumb-item>
      <el-breadcrumb-item
        ><a
          href="#/powerSupplyDistributionEquipment"
          style="cursor: pointer; color: #fff"
          >供配电设备</a
        ></el-breadcrumb-item
      >
    </el-breadcrumb>
    <div>
      <div class="flex" style="margin: 20px 0">
        <div>图例：</div>
        <div class="flex">
          <div class="bihe"></div>
          <div style="margin-left: 10px">闭合</div>
        </div>
        <div class="flex">
          <div class="duankai"></div>
          <div style="margin-left: 10px">断开</div>
        </div>
        <div class="flex">
          <div class="lixian"></div>
          <div style="margin-left: 10px">离线</div>
        </div>
        <div class="flex">
          <div class="zhengchang"></div>
          <div style="margin-left: 10px">正常</div>
        </div>
        <div class="flex">
          <div class="yichang"></div>
          <div style="margin-left: 10px">异常</div>
        </div>
        <div class="flex">
          <div class="lixian1"></div>
          <div style="margin-left: 10px">离线</div>
        </div>
      </div>
      <div class="flex2">
        <div style="width: 49%">
          <el-table
            :data="tableData"
            style="width: 100%"
            cell-style="color:#fff"
            header-cell-style="color:#fff;background:rgb(27, 79, 133)"
          >
            <el-table-column label="1#变压器">
              <template>
                <div class="flex1">
                  <div style="width: 100%">
                    <div>
                      <img
                        src="../../assets/bianyaqi.png"
                        alt=""
                        class="bianyaqi"
                      />
                    </div>
                    <div>
                      <el-table
                        :data="tableData1"
                        style="width: 100%"
                        cell-style="color:#fff"
                        header-cell-style="color:#fff;background:rgb(27, 79, 133)"
                        :show-header="false"
                      >
                        <el-table-column prop="1"></el-table-column>
                        <el-table-column prop="2"></el-table-column>
                      </el-table>
                    </div>
                  </div>
                  <img
                    src="../../assets/bianyaqi1.png"
                    alt=""
                    class="bianyaqi1"
                  />
                  <div style="width: 50%">
                    <el-table
                      :data="tableData2"
                      style="width: 100%"
                      cell-style="color:#fff"
                      header-cell-style="color:#fff;background:rgb(27, 79, 133)"
                    >
                      <el-table-column
                        prop="1"
                        label="1#变压器"
                      ></el-table-column>
                    </el-table>
                    <el-table
                      :data="tableData3"
                      style="width: 100%; margin-top: 20px"
                      cell-style="color:#fff"
                      header-cell-style="color:#fff;background:rgb(27, 79, 133)"
                    >
                      <el-table-column prop="1" label="温度报警系统">
                        <template>
                          <div class="flex">
                            <div>开门跳闸：</div>
                            <div
                              class="zhengchang"
                              style="margin-left: 10px"
                            ></div>
                          </div>
                          <div class="flex">
                            <div>高温报警：</div>
                            <div
                              class="zhengchang"
                              style="margin-left: 10px"
                            ></div>
                          </div>
                          <div class="flex">
                            <div>超温跳闸：</div>
                            <div
                              class="zhengchang"
                              style="margin-left: 10px"
                            ></div>
                          </div>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-table
            :data="tableData4"
            style="width: 100%"
            cell-style="color:#fff"
            header-cell-style="color:#fff;background:rgb(27, 79, 133)"
          >
            <el-table-column prop="1" label="实时运行数据"></el-table-column>
          </el-table>
        </div>
        <div style="width: 49%">
          <el-table
            :data="tableData"
            style="width: 100%"
            cell-style="color:#fff"
            header-cell-style="color:#fff;background:rgb(27, 79, 133)"
          >
            <el-table-column label="2#变压器">
              <template>
                <div class="flex1">
                  <div style="width: 100%">
                    <div>
                      <img
                        src="../../assets/bianyaqi.png"
                        alt=""
                        class="bianyaqi"
                      />
                    </div>
                    <div>
                      <el-table
                        :data="tableData1"
                        style="width: 100%"
                        cell-style="color:#fff"
                        header-cell-style="color:#fff;background:rgb(27, 79, 133)"
                        :show-header="false"
                      >
                        <el-table-column prop="1"></el-table-column>
                        <el-table-column prop="2"></el-table-column>
                      </el-table>
                    </div>
                  </div>
                  <img
                    src="../../assets/bianyaqi1.png"
                    alt=""
                    class="bianyaqi1"
                  />
                  <div style="width: 50%">
                    <el-table
                      :data="tableData2"
                      style="width: 100%"
                      cell-style="color:#fff"
                      header-cell-style="color:#fff;background:rgb(27, 79, 133)"
                    >
                      <el-table-column
                        prop="1"
                        label="1#变压器"
                      ></el-table-column>
                    </el-table>
                    <el-table
                      :data="tableData3"
                      style="width: 100%; margin-top: 20px"
                      cell-style="color:#fff"
                      header-cell-style="color:#fff;background:rgb(27, 79, 133)"
                    >
                      <el-table-column prop="1" label="温度报警系统">
                        <template>
                          <div class="flex">
                            <div>开门跳闸：</div>
                            <div
                              class="zhengchang"
                              style="margin-left: 10px"
                            ></div>
                          </div>
                          <div class="flex">
                            <div>高温报警：</div>
                            <div
                              class="zhengchang"
                              style="margin-left: 10px"
                            ></div>
                          </div>
                          <div class="flex">
                            <div>超温跳闸：</div>
                            <div
                              class="zhengchang"
                              style="margin-left: 10px"
                            ></div>
                          </div>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-table
            :data="tableData4"
            style="width: 100%"
            cell-style="color:#fff"
            header-cell-style="color:#fff;background:rgb(27, 79, 133)"
          >
            <el-table-column prop="1" label="实时运行数据"></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
    
    <script>
export default {
  data() {
    return {
      tableData: [{}],
      tableData1: [
        {
          1: "额定容量:",
          2: "630KVA",
        },
        {
          1: "型号:",
          2: "SCB11-630/10",
        },
        {
          1: "连接组别:",
          2: "Dyn11",
        },
        {
          1: "短路阻抗:",
          2: "6%",
        },
      ],
      tableData2: [
        { 1: "A相温度:53.70℃" },
        { 1: "B相温度:62.50℃" },
        { 1: "C相温度:62.50℃" },
        { 1: "负载率:50.30%" },
      ],
      tableData3: [{}],
      tableData4: [],
    };
  },
  methods: {},
  mounted() {},
};
</script>
    
    <style scoped>
.bianyaqi {
  width: 100%;
}

.bianyaqi1 {
  width: 25%;
  margin: 0 10px;
}

.bihe {
  width: 25px;
  height: 12px;
  background: red;
  margin-left: 10px;
}

.duankai {
  width: 25px;
  height: 12px;
  background: greenyellow;
  margin-left: 10px;
}

.lixian {
  width: 25px;
  height: 12px;
  background: grey;
  margin-left: 10px;
}

.zhengchang {
  width: 12px;
  height: 12px;
  background: red;
  margin-left: 10px;
  border-radius: 6px;
}

.yichang {
  width: 12px;
  height: 12px;
  background: greenyellow;
  margin-left: 10px;
  border-radius: 6px;
}

.lixian1 {
  width: 12px;
  height: 12px;
  background: grey;
  margin-left: 10px;
  border-radius: 6px;
}

.select {
  margin: 20px;
}

.el-select {
  width: 120px !important;
  /* border: 1px solid #fff !important; */
}

::v-deep .el-select,
::v-deep .el-input,
::v-deep .el-input__inner {
  height: 30px !important;
  background: none;
  color: #fff;
  /* border: 1px solid #fff; */
  border-radius: 0px;
  align-items: center;
  /* text-align: center; */
}

::v-deep .el-input__icon {
  line-height: 0px !important;
}

/*最外层透明*/
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
  background-color: transparent;
}
/* 表格内背景颜色 */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  background-color: transparent;
}

::v-deep.el-pagination__total {
  color: #fff;
}

::v-deep .el-radio-button__inner {
  background-color: transparent;
  border: none;
  color: #fff;
}

::v-deep .el-radio-button:first-child .el-radio-button__inner {
  border-radius: 0px;
  border-left: none;
}

::v-deep .el-radio-button:last-child .el-radio-button__inner {
  border-radius: 0px;
}

::v-deep .el-table tbody tr:hover > td {
  background-color: rgb(27, 79, 133) !important;
}

::v-deep .el-tree {
  position: relative;
  cursor: default;
  background: transparent;
  color: #fff;
}

::v-deep .el-tree-node > .el-tree-node__content:hover {
  background-color: rgb(27, 79, 133) !important;
}

::v-deep
  .el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  color: #fff;
  background: rgb(27, 79, 133) !important;
}

::v-deep .el-date-editor .el-range-input {
  background: transparent;
  color: #fff;
}
</style>